<template>
  <div>
    <div class="top-three">
      <div class="items">
        
      </div>
      <div class="items"></div>
      <div class="items"></div>
    </div>
    <div id="contents"></div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";

// onMounted(() => {
//   myChart = echarts.init(document.getElementById("contents"));
//   myChart.setOption({
//     title: {
//       text: "Stacked Line",
//     },
//     tooltip: {
//       trigger: "axis",
//     },
//     legend: {
//       data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
//     },
//     grid: {
//       left: "3%",
//       right: "4%",
//       bottom: "3%",
//       containLabel: true,
//     },
//     toolbox: {
//       feature: {
//         saveAsImage: {},
//       },
//     },
//     xAxis: {
//       type: "category",
//       boundaryGap: false,
//       data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
//     },
//     yAxis: {
//       type: "value",
//     },
//     series: [
//       {
//         name: "Email",
//         type: "line",
//         stack: "Total",
//         data: [120, 132, 101, 134, 90, 230, 210],
//       },
//       {
//         name: "Union Ads",
//         type: "line",
//         stack: "Total",
//         data: [220, 182, 191, 234, 290, 330, 310],
//       },
//       {
//         name: "Video Ads",
//         type: "line",
//         stack: "Total",
//         data: [150, 232, 201, 154, 190, 330, 410],
//       },
//       {
//         name: "Direct",
//         type: "line",
//         stack: "Total",
//         data: [320, 332, 301, 334, 390, 330, 320],
//       },
//       {
//         name: "Search Engine",
//         type: "line",
//         stack: "Total",
//         data: [820, 932, 901, 934, 1290, 1330, 1320],
//       },
//     ],
//   });
// });
// onBeforeUnmount(() => {
//   myChart.dispose(); // 清理图表
// });
</script>

<style lang="scss" scoped>
.top-three {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: space-around;
}
.items {
  margin: 10px 0;
  width: 350px;
  height: 130px;
  background-color: #f5f5f5;
}
#contents {
  width: 100%;
  height: 430px;
  margin: 10px 0;
  background-color: #49759f;
}
</style>
